<template>
  <div class="product-search">
    <!-- 导航栏 -->
    <van-nav-bar title="商品搜索" left-arrow @click-left="$router.back()" />
    <!-- 搜索框 -->
    <div class="search-box">
      <van-icon name="search" class="search-icon"></van-icon>
      <input v-focus type="text" placeholder="请输入您搜索的商品" class="search-inp" v-model.trim="value" @keyup.enter="search">
      <van-button type="danger" class="search-btn" @click="searchAndJump()">搜索</van-button>
    </div>
    <van-cell title="最近搜索">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <van-icon name="delete-o" class="delete-icon" @click="clearKeyWords"/>
      </template>
    </van-cell>

<!-- 历史记录 -->
    <div class="keyword-group clearfix">
      <div class="keyword" v-for="item in keywords" :key="item" @click="$jumpToPath('goods/list', {search: item})">
        {{item}}
      </div>
    </div>
  </div>
</template>

<script>
import { GET_HISTORY, REMOVE_HISTORY, SET_HISTORY } from '@/utils/localstorage.js'
export default {
  name: 'ProductSearch',
  data () {
    return {
      value: '',
      // 关键字列表
      // keywords: JSON.parse(localStorage.getItem('keywords')) || []
      keywords: GET_HISTORY() || []
    }
  },
  computed: {
  },
  methods: {
    search () {
      if (this.value.trim() === '') {
        return false
      }
      // 如果关键字相同就删除，然后追加到前面；如果关键字不同，就直接在前面追加
      const index = this.keywords.indexOf(this.value)
      // 用indexOf可以直接通过索引去删除
      if (index !== -1) {
        // 找到了
        this.keywords.splice(index, 1) // 删除
      }
      // 无论找不找到得到，都直接追加到前面
      this.keywords.unshift(this.value)
      // 存进localStorge
      // localStorage.setItem('keywords', JSON.stringify(this.keywords))
      SET_HISTORY(this.keywords)
    },
    searchAndJump () {
      if (!this.search()) {
        return
      }
      this.$jumpToPath('goods/list', { search: this.value })
    },
    clearKeyWords () {
      this.keywords = []
      REMOVE_HISTORY()
    }
  }
}
</script>

<style lang="less" scoped>
.clearfix::after,
.clearfix::before {
  clear: both;
  content: '';
  display: table;
}
.product-search {
  background-color: #f7f7f7 !important;

  // 搜索框
  .search-box {
    margin: 10px;
    padding-left: 8px;
    position: relative;
    height: 35px;
    line-height: 35px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    // aa
    .search-icon {
      margin: 5px;
    }

    .search-inp {
      border: 0;
      width: 70%;
    }
    .search-btn {
      float: right;
      width: 20%;
      height: 35px;
    }
  }

  .keyword {
    float: left;
    margin: 10px;
    width: 29%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 17.5px;
    overflow: hidden;
    background-color: #fff;
  }
}
.van-nav-bar .van-icon {
  color: #000;
}
.van-nav-bar__arrow::before {
  color: #000;
}

.van-search__action {
  height: 34px;
  margin-bottom: 8px;
}
.search-title {
  background-color: #f7f7f7;
  border: 0;
}

.van-cell {
  background-color: transparent;
}
</style>
